<template>
  <view class="landscape-container">
    <view class="login-out">
      <image src="./imgs/icon-login-out.png" class="login-out-img"></image>
      <view class="login-out-text">退出</view>
    </view>
    <view class="sider-bar">
      <view class="sider-box" v-if="!isToggle">
        <view class="sider-column">
          <view class="column-header">
            <view class="header-title">仪器介绍</view>
            <view class="header-btn" v-if="isAll1" @click="isAll1 = false">
              <view class="btn-text">收起</view>
              <image src="./imgs/icon-arrow-up.png" class="icon-arrow"></image>
            </view>
            <view class="header-btn" v-else @click="isAll1 = true">
              <view class="btn-text">展开</view>
              <image
                src="./imgs/icon-arrow-down.png"
                class="icon-arrow"
              ></image>
            </view>
          </view>
          <view class="column-body" v-if="isAll1">
            <view class="content-html" v-html="datas?.introduce"></view>
          </view>
        </view>
        <view class="sider-column">
          <view class="column-header">
            <view class="header-title">实验内容</view>
            <view class="header-btn" v-if="isAll2" @click="isAll2 = false">
              <view class="btn-text">收起</view>
              <image src="./imgs/icon-arrow-up.png" class="icon-arrow"></image>
            </view>
            <view class="header-btn" v-else @click="isAll2 = true">
              <view class="btn-text">展开</view>
              <image
                src="./imgs/icon-arrow-down.png"
                class="icon-arrow"
              ></image>
            </view>
          </view>
          <view class="column-body" v-if="isAll2">
            <view class="content-html" v-html="datas?.experiment"></view>
          </view>
        </view>
        <view class="sider-column">
          <view class="column-header">
            <view class="header-title">配置参数</view>
            <view class="header-btn" v-if="isAll3" @click="isAll3 = false">
              <view class="btn-text">收起</view>
              <image src="./imgs/icon-arrow-up.png" class="icon-arrow"></image>
            </view>
            <view class="header-btn" v-else @click="isAll1 = true">
              <view class="btn-text">展开</view>
              <image
                src="./imgs/icon-arrow-down.png"
                class="icon-arrow"
              ></image>
            </view>
          </view>
          <view class="column-body" v-if="isAll3">
            <view class="content-html" v-html="datas?.remark"></view>
          </view>
        </view>
      </view>
      <view
        class="sider-bar-tip"
        :class="{ toggle: isToggle }"
        @click="handleToggle"
      >
        <view class="bar-tip-text">仪 器 简 介</view>
        <view class="bar-tip-arrow"></view>
      </view>
    </view>
    <view class="control-bar">
      <view
        class="control-btn"
        v-for="(item, index) in btns"
        :key="index"
        :class="{ active: item.checked }"
        @click="handleBtn(index)"
      >
        <view class="tip-text">{{ item.text }}</view>
      </view>
    </view>
    <iframe
      :src="url"
      class="iframe"
      ref="iframeRef"
      @load="sendChangeStatus"
      @error="handleError"
    ></iframe>
  </view>
</template>

<script>
const innerAudioContext = uni.createInnerAudioContext();
export default {
  data() {
    return {
      isToggle: false,
      isAll1: true,
      isAll2: true,
      isAll3: true,
      id: "",
      btns: [
        {
          checked: false,
          text: "背景音乐/开启",
        },
        {
          checked: false,
          text: "自动轮播/开启",
        },
        {
          checked: false,
          text: "切换",
        },
        // {
        //   checked: false,
        //   text: "模型分解/开启",
        // },
      ],
      curIndex: null,
      url: `https://lib.fantasy-lab.com/3d/index.html?murl=models/Mikegansheyi/Maikegansheyi_dizuo/Maikegansheyi_dizuo.gltf?ver=${Math.floor(
        Math.random() * 10000
      )}`,
      datas: {},
      listData: [],
      total: 0,
      timer: null,
      currentSong: "",
    };
  },

  methods: {
    handleBack() {
      uni.navigateBack();
    },
    playMusic() {
      innerAudioContext.play();
    },
    stopMusic() {
      innerAudioContext.pause();
    },
    loadMusic() {
      innerAudioContext.src = this.currentSong;
    },
    handleChangeMusic() {
      if (this.btns[0].checked == true) {
        this.playMusic();
      } else {
        this.stopMusic();
      }
    },
    async handleChangeAutoPlay() {
      if (this.btns[1].checked == true) {
        this.timer= setInterval(() => {
          this.handleChangeSwitch();
        }, 5000);
      } else {
        clearInterval( this.timer);
        this.timer = null;
      }
    },
    async handleChangeSwitch() {
      this.curIndex++;
      if (this.curIndex >= this.listData.length) {
        this.curIndex = 0;
      }
      let id = this.listData[this.curIndex].instrument_id;
      await this.getData(id);
      this.btns[2].checked = false;
    },
    handleBtn(index) {
      this.btns[index].checked = !this.btns[index].checked;
      switch (index) {
        case 0:
          this.handleChangeMusic();
          break;
        case 1:
          this.handleChangeAutoPlay();
          break;
        case 2:
          this.handleChangeSwitch();
          break;
      }
    },
    handleToggle() {
      this.isToggle = !this.isToggle;
    },
    handleError(e) {
      console.log(e, "webview加载失败");
    },
    sendChangeStatus() {
      if (this.$refs.iframeRef.contentWindow) {
        const datas = {
          type: "changeStatus",
          data: "open",
        };
        this.$refs.iframeRef.contentWindow.postMessage(datas, "*");
      }
    },
    async getListData() {
      let params = { current: 1, pageSize: 9999 };
      let res = await this.API.InstrumentPagedList({
        args: params,
      });
      this.total = res.total;
      this.listData = res.data;
      this.curIndex = this.listData.findIndex(
        (item) => item.instrument_id == this.id
      );
      console.log("仪器列表", this.curIndex);
    },
    async getData(id) {
      let params = {
        instrument_id: id,
      };
      let res = await this.API.InstrumentDetail(params);
      console.log(111, res);
      this.datas = res;
      this.currentSong = res.music_url;
      //this.currentSong ="https://st.92kk.com/2023/%E5%9B%BD%E6%BD%AE%E6%94%B9%E7%89%88/202309/20230913/%E4%BB%BB%E5%A4%8F-%E5%B8%83%E6%B4%9B%E8%8A%AC%E7%9A%84%E6%82%B2%E4%BC%A4[%E5%A8%81%E9%9F%B3Dj%E5%8D%8E%E4%BB%94_Electro_Rmx_2023]MP3%E4%B8%8B%E8%BD%BD%E5%9C%A8%E7%BA%BF%E8%AF%95%E5%90%AC.mp3";
      if (this.currentSong) {
        await this.loadMusic();
        await this.handleChangeMusic();
      }
    },
  },
  async onLoad(options) {
    //尝试使用 API 锁定横屏 (部分浏览器支持)
    if (screen.orientation && screen.orientation.lock) {
      screen.orientation.lock("landscape").catch((e) => {
        console.warn("锁定横屏失败，使用 CSS 方案", e);
      });
    }
    this.id = options.id;
    await this.getData(this.id);
    await this.getListData();
  },
  onUnload() {
    //退出页面时尝试解锁屏幕方向
    if (screen.orientation && screen.orientation.unlock) {
      screen.orientation.unlock();
    }
  },
};
</script>

<style lang="less" scoped>
/* 关键样式：强制横屏效果 */
@media (orientation: portrait) {
  .landscape-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vh; /* 使用屏幕高度作为宽度 */
    height: 100vw; /* 使用屏幕宽度作为高度 */
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
    .iframe {
      width: 100vh;
      height: 100vw;
      border: 0;
    }
  }
}

/* 横屏设备直接使用全屏 */
@media (orientation: landscape) {
  .landscape-container {
    width: 100vw;
    height: 100vh;
  }
}
/* 基础样式 */

.iframe {
  width: 100vw;
  height: 100vh;
  border: 0;
}
.login-out {
  position: fixed;
  z-index: 99;
  top: 10rpx;
  right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 63rpx;
  height: 30rpx;
  background: #ffffff;
  border-radius: 7rpx;
  .login-out-img {
    width: 15rpx;
    height: 15rpx;
  }
  .login-out-text {
    width: 22rpx;
    height: 15rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 11rpx;
    color: #262626;
    line-height: 15rpx;
    text-align: center;
    font-style: normal;
  }
}
.sider-bar {
  position: fixed;
  z-index: 99;
  top: 10rpx;
  left: 10rpx;
  bottom: 10rpx;
  .sider-box {
    width: 233rpx;
    height: 100%;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 7rpx;
    padding: 12rpx;

    .content-html {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 11rpx;
      color: #595959;
      line-height: 15rpx;
      text-align: left;
      font-style: normal;
    }
    .sider-column {
      padding-bottom: 12rpx;
      margin-bottom: 12rpx;
      border-bottom: 1rpx solid #e6ebf1;
      .column-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 11rpx;
          color: #262626;
          line-height: 15rpx;
          text-align: left;
          font-style: normal;
        }
        .header-btn {
          display: flex;
          align-items: center;
          .btn-text {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 11rpx;
            color: #595959;
            line-height: 15rpx;
            text-align: left;
            font-style: normal;
          }
          .icon-arrow {
            width: 11rpx;
            height: 11rpx;
          }
        }
      }
      .column-body {
        padding-top: 12rpx;
      }
    }
    .sider-button {
      width: 211rpx;
      height: 37rpx;
      background: #ffffff;
      border-radius: 4rpx;
      border: 1rpx solid #2776ff;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 13rpx;
      color: #2776ff;
      line-height: 37rpx;
      text-align: center;
      font-style: normal;
    }
  }
  .sider-bar-tip {
    position: absolute;
    top: 50%;
    right: -30rpx;
    transform: translateY(-50%);
    width: 30rpx;
    height: 87rpx;
    background: #ffffff;
    border-radius: 0rpx 7rpx 7rpx 0rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    &.toggle {
      border-radius: 7rpx;
      .bar-tip-arrow {
        transform: rotate(180deg);
      }
    }
    .bar-tip-text {
      width: 11rpx;
      height: 59rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 11rpx;
      color: #262626;
      line-height: 15rpx;
      text-align: left;
      font-style: normal;
    }
    .bar-tip-arrow {
      width: 15rpx;
      height: 15rpx;
      background-image: url("./imgs/icon-arrow-left.png");
      background-size: cover;
      transition: all 0.3s;
    }
  }
}
.control-bar {
  position: fixed;
  z-index: 99;
  top: 50%;
  transform: translateY(-50%);
  width: 46rpx;
  height: 180rpx;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  right: 28rpx;
  .control-btn {
    width: 46rpx;
    height: 46rpx;
    position: relative;
    .tip-text {
      position: absolute;
      right: 64rpx;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.75);
      height: 35rpx;
      display: flex;
      opacity: 0;
      //css事件穿透
      pointer-events: none;
      transition: all 0.3s;
      align-items: center;
      word-break: keep-all;
      padding: 0 12rpx;
      white-space: nowrap;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 13rpx;
      color: #262626;
      line-height: 20rpx;
      text-align: left;
      font-style: normal;
      &::after {
        content: "";
        position: absolute;
        right: -12rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 8rpx solid transparent;
        border-bottom: 8rpx solid transparent;
        border-right: 8rpx solid transparent;
        border-left: 5rpx solid rgba(255, 255, 255, 0.75);
      }
    }
    &:nth-child(1) {
      background: url("./imgs/control-bg.png") no-repeat 0 0;
      background-size: 100% auto;
      &.active {
        background: url("./imgs/control-cur-bg.png") no-repeat 0 0;
        background-size: 100% auto;
        .tip-text {
          animation: fadeOut 3s;
        }
      }
    }
    &:nth-child(2) {
      background: url("./imgs/control-bg.png") no-repeat 0 -61rpx;
      background-size: 100% auto;
      &.active {
        background: url("./imgs/control-cur-bg.png") no-repeat 0 -61rpx;
        background-size: 100% auto;
        .tip-text {
          //动画3秒消失不在出现了，但是动画还在执行中，所以这里要加上display:none;
          animation: fadeOut 3s;
        }
      }
    }
    &:nth-child(3) {
      background: url("./imgs/control-bg.png") no-repeat 0 -122rpx;
      background-size: 100% auto;
      &.active {
        background: url("./imgs/control-cur-bg.png") no-repeat 0 -122rpx;
        background-size: 100% auto;
        .tip-text {
          animation: fadeOut 3s;
        }
      }
    }
    &:nth-child(4) {
      background: url("./imgs/control-bg.png") no-repeat 0 -183rpx;
      background-size: 100% auto;
      &.active {
        background: url("./imgs/control-cur-bg.png") no-repeat 0 -183rpx;
        background-size: 100% auto;
        .tip-text {
          animation: fadeOut 3s;
        }
      }
    }
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
